<template>
    <div class="swipe">
        <van-swipe :autoplay="3000" :height="240">
            <van-swipe-item><img src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="" style="height: 240px"></van-swipe-item>
            <van-swipe-item><img src="https://img.yzcdn.cn/vant/apple-2.jpg" alt="" style="height: 240px"></van-swipe-item>
            <van-swipe-item><img src="https://img.yzcdn.cn/vant/apple-3.jpg" alt="" style="height: 240px"></van-swipe-item>
            <van-swipe-item><img src="https://img.yzcdn.cn/vant/apple-4.jpg" alt="" style="height: 240px"></van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
  import Vue from 'vue';
  import {Swipe,SwipeItem} from 'vant'
  Vue.use(Swipe).use(SwipeItem)
  export default {
    name: "Swipe",
    components:{
      Swipe,
      SwipeItem
    }
  }
</script>

<style scoped>
.van-swipe-item{
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    width: 100%;
    height: 100%;
}
</style>
